
// =========== { 1 } ===========
// 在 JSX 中嵌入表达式
const name = 'shanliangdeYWJ'
const element = <h1>{name}</h1>
ReactDOM.render(element, document.getElementById('root1'));


// =========== { 2 } ===========
// 格式化名字
function formatName (user) { return user.firstName + user.lastName }
// 名字对象
const user = { firstName: 'shanliangde', lastName: 'YWJ' }
// 用格式化方法格式化名字对象，返回标签
function getGreeting (user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
// 渲染函数
ReactDOM.render(
  getGreeting(user),
  document.getElementById('root2')
);

// =========== { 3 } ===========
// JSX 特定属性
const element3 = <div tabIndex="0">0</div>
const element4 = <img src="../images/avatar.jpg" alt={user.firstName} />

ReactDOM.render(
  <div>
    {element3}
    {element4}
  </div>,
  document.getElementById('root3')
);